<template>
  <div>
    <div class="flex wrap flex_between">
      <p class="title">{{ setTitle }}</p>
      <p class="btn" @click="checkhistoy">历史记录</p>
    </div>
    <div class="flex" style="padding-top: 0.97vh">
      <div class="box" @click="getPreview">
        <img :src="getList.imageUrl" alt="" />
      </div>
      <div class="content">
        <div class="flex flex_between">
          <p>告警时间:</p>
          <p class="carText">{{ getList.alarm_time }}</p>
        </div>
        <div class="flex flex_between">
          <p>告警位置:</p>
          <p class="carText">{{ getList.address }}</p>
        </div>
        <div class="flex flex_between">
          <p>今日告警次数:</p>
          <p class="carText">{{ getList.today_alarm_times }}</p>
        </div>
        <div class="flex flex_between">
          <p>历史告警次数:</p>
          <p class="carText">{{ getList.total_alarm_times }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { preview } from "api/zyy";
export default {
  components: {},
  props: {
    title: {
      type: String,
    },
    list: {
      type: Object,
    },
  },
  // 计算属性，会监听依赖属性值随之变化

  computed: {
    ...mapState({ historyOff: (state) => state.winconcrol.historyOff }),
    setTitle() {
      return this.title;
    },
    getList() {
      if (!this.list.imageUrl) {
        this.list.imageUrl = require("assets/images/zyy/d1.jpg");
      }
      return this.list;
    },
  },
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["setVideoShow", "setSocketVideoUrl", "setHistoryOff"]),
    async getPreview() {
      this.setSocketVideoUrl("");
      var formData = new FormData();
      const { device_code } = this.getList;
      if (!device_code) return;
      formData.append("indexCode", device_code);
      let res = await preview(formData);
      if (this.$iscode(res)) {
        const {
          data: { url = "" },
        } = res;
        if (url) {
          this.setSocketVideoUrl(url);
          this.setVideoShow(true);
        }
      }
    },
    checkhistoy() {
      if (this.historyOff.status) return;
      this.setHistoryOff(
        JSON.stringify({
          status: true,
          source: 1,
        })
      );
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.flex {
  display: flex;
}
.flex_between {
  justify-content: space-between;
}

.wrap p {
  color: #fff;
}
.box {
  width: 7vw;
  height: 8.38vh;
  border: 2px solid #43c0ee;
  box-sizing: border-box;
}
.box img {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}
.content {
  width: 10.938vw;
  margin-left: 0.885vw;
  color: #fff;
  font-size: 0.521vw;
}
.content div {
  margin-top: 0.8vh;
}
.carText {
  color: #02d1e1;
}
.carNum {
  color: #fff88a;
  font-weight: bold;
}
.btn {
  width: 3.26vw;
  max-width: 3.26vw;
  height: 0.57vw;
  line-height: 0.57vw;
  font-size: 0.45vw;
  background-image: linear-gradient(153deg, #34a1ff 0%, #0f3962 27%, #0c3054 100%);
  border: solid 0.03vw #34a1ff;
  text-align: center;
  padding: 0.2vw 0;
}
.title{
  font-size: 23px;
}
</style>
